<!-- src/components/MarkdownEditor.vue -->
<template>
  <v-md-editor
    v-model="content"
    height="400px"
    @change="handleChange"
    :preview-class="previewClass"
    :include-level="[1, 2, 3, 4, 5, 6]"
  ></v-md-editor>
</template>

<script setup>
import { ref, watch,defineProps,defineEmits } from 'vue'
import VueMarkdownEditor from '@kangc/v-md-editor';
import '@kangc/v-md-editor/lib/style/base-editor.css';
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js';
import '@kangc/v-md-editor/lib/theme/style/vuepress.css';

// 导入 Prism
import Prism from 'prismjs';

// 导入你需要的语言
import 'prismjs/components/prism-javascript';
import 'prismjs/components/prism-java';
import 'prismjs/components/prism-python';
import 'prismjs/components/prism-css';
import 'prismjs/components/prism-markup'; // HTML

// 配置 VueMarkdownEditor 使用 vuepress 主题和 Prism
VueMarkdownEditor.use(vuepressTheme, {
  Prism,
});

// 定义组件的 props
const props = defineProps({
  modelValue: {
    type: String,
    default: '',
  },
})

// 定义组件可以触发的事件
const emit = defineEmits(['update:modelValue'])

// 创建一个响应式引用，用于存储编辑器的内容
const content = ref(props.modelValue)

// 设置预览区域的 CSS 类名，以应用自定义样式
const previewClass = 'markdown-content'

// 监听 props 中 modelValue 的变化，并更新本地的 content
watch(() => props.modelValue, (newValue) => {
  content.value = newValue
})

// 处理编辑器内容变化的函数
const handleChange = (text) => {
  // 触发 update:modelValue 事件，将新的内容传递给父组件
  emit('update:modelValue', text)
}
</script>

<style lang="scss">
@import '@/assets/styles/markdown-content.scss';

// 导入 Prism 的默认样式
@import 'prismjs/themes/prism.css';

// 设置编辑器的高度
.v-md-editor {
  height: 400px;

  // 覆盖预览区域的样式
  .v-md-preview {
    padding: 20px;
    
    // 确保所有文本左对齐
    text-align: left;

    // 覆盖标题样式
    h1, h2, h3, h4, h5, h6 {
      text-align: left;
      margin-top: 24px;
      margin-bottom: 16px;
      font-weight: 600;
      line-height: 1.25;
    }

    h1 { font-size: 2em; }
    h2 { font-size: 1.5em; }
    h3 { font-size: 1.25em; }

    // 覆盖段落样式
    p {
      text-align: left;
      margin-bottom: 16px;
    }

    // 覆盖列表样式
    ul, ol {
      padding-left: 2em;
      margin-bottom: 16px;
    }

    // 覆盖代码块样式
    pre {
      text-align: left;
    }

    // 覆盖表格样式
    table {
      text-align: left;
    }

    // 覆盖引用样式
    blockquote {
      text-align: left;
    }
  }
}

// 应用自定义的 markdown-content 样式
.markdown-content {
  @extend .v-md-preview;
}
</style>